<template>
  <div>
    <el-date-picker
      v-model="value1"
      placeholder="选择日期"
      style="margin-left: 10px; margin-top: 10px"
      type="date"
      value-format="yyyy-MM-dd"
      @change="init"
    />
    <div class="table_wrap">
      <table>
        <tbody>
          <tr v-for="(items, index) in tableData" :key="index">
            <td style="width: 100px; height: 100px">
              <div class="box">
                <p style="line-height: 100px">{{ items.user_name }}</p>
              </div>
            </td>
            <td v-for="(e, k) in items.times" :key="k">
              <div
                v-if="e.status"
                class="box"
                style="background: #67c23a; color: #fff"
              >
                <p style="line-height: 30px">{{ e.status_name }}</p>
                <p>{{ e.start_time }}-{{ e.end_time }}</p>
                <p>{{ e.member_name }}</p>
              </div>
              <div
                v-else
                class="box"
                style="background: #909399; color: #fff; line-height: 30px"
              >
                <p>{{ e.start_time }}-{{ e.end_time }}</p>
                <p>
                  {{ '无课' }}
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import { courseTable } from '@/api/reservation'
  //mechanismObjectiveAdd
  export default {
    props: {},
    data() {
      return {
        value1: '',
        tableData: [],
      }
    },
    mounted() {
      this.init()
    },

    beforeMount() {},
    methods: {
      init() {
        // const loading = this.$loading({
        //   lock: true,
        //   target: '.el-table__body',
        // })
        const data = {
          date: this.value1,
        }
        courseTable(data).then((e) => {
          this.tableData = e.data
          // loading.close()
        })
      },
    },
  }
</script>

<style scoped>
  .table_wrap {
    width: 100%;
    height: 65vh;
    overflow: auto;
    margin-top: 10px;
    margin-left: 10px;
  }
  table {
    table-layout: fixed;

    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ededed;
  }

  td,
  th {
    text-align: center;
    width: 150px;
    box-sizing: border-box;
    border-right: 1px solid red;
    border-right: 1px solid #e4e4e4;

    border-bottom: 1px solid #e4e4e4;
    /*超出长度...*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    background: #fff;

    text-align: center;
  }

  .box {
    width: 130px;
    height: 100px;
    border-radius: 10px;
  }
</style>
